<template>
  <div>
    <h3>默认调用时间</h3>
    <div>进入时间为：{{currEnterCnTime }}</div>
    <div>当前时间为：{{currCnTime}}</div>
    <div>距离之前为：{{timeAgo}}</div>
  </div>
  <div class="mt20">
    <h3>通过滑块体验时间</h3>
    <div class="text-align-center">
      {{ sliderTimeAgo }}
    </div>
    <input v-model="slider" class="slider" type="range" min="-3800" max="3800">
    <div class="text-align-center ">
      {{ slider ** 3 }}ms
    </div>
  </div>
</template>
<script>
import { onMounted, onUnmounted, reactive, toRefs, computed, watch } from 'vue';
import { useTimeAgo, useNow, useDateFormat } from '@vueuse/core';
import { timestamp } from '@vueuse/shared';
export default {
  name: '',
  props: {},
  components: {},
  setup(props, { emit }) {
    function initState() {
      return {
        timeAgo: '',
        currEnterTime: '',
        currEnterCnTime: '',
        currCnTime: '',
        timeInterval: null,

        slider: 0,
        sliderTimeAgo: '',

        znCnMessage: {
          justNow: '刚刚',
          past: n => (n.match(/\d/) ? `${n}以前` : n),
          future: n => (n.match(/\d/) ? `未来 ${n}` : n),
          month: (n, past) => (n === 1 ? (past ? '上个月' : '下个月') : `${n}个月${n > 1 ? '' : ''}`),
          year: (n, past) => (n === 1 ? (past ? '去年' : '明年') : `${n}年${n > 1 ? '' : ''}`),
          day: (n, past) => (n === 1 ? (past ? '昨天' : '明天') : `${n}天${n > 1 ? '' : ''}`),
          week: (n, past) => (n === 1 ? (past ? '上一周' : '下一周') : `${n}周${n > 1 ? '' : ''}`),
          hour: n => `${n}小时${n > 1 ? '' : ''}`,
          minute: n => `${n}分钟${n > 1 ? '' : ''}`,
          second: n => `${n}秒${n > 1 ? '' : ''}`,
        },
      };
    }
    const state = reactive(initState());

    onMounted(() => {
      //默认时间
      state.currEnterTime = new Date();
      state.currEnterCnTime = useDateFormat(state.currEnterTime, 'YYYY年MM月DD日 HH时mm分ss秒SSS毫秒  dddd');
      state.currCnTime = useDateFormat(useNow(), 'YYYY年MM月DD日 HH时mm分ss秒SSS毫秒  dddd');
      lookTime();

      // 滑动的时间
      const tempSliderValue = computed(() => timestamp() + state.slider ** 3);
      state.sliderTimeAgo = useTimeAgo(tempSliderValue, {
        showSecond: true,
        messages: state.znCnMessage,
      });
    });
    function lookTime() {
      state.timeInterval = setInterval(() => {
        state.timeAgo = useTimeAgo(state.currEnterTime, {
          showSecond: true,
          messages: state.znCnMessage,
        });
      }, 3000);
    }
    // function setZhCnName(val) {
    //   const timeAgo = val.value;
    //   if (timeAgo.indexOf('seconds ago') > -1) {
    //     return timeAgo.replace('seconds ago', '秒前');
    //   } else if (timeAgo.indexOf('minutes ago') > -1) {
    //     return timeAgo.replace('minutes ago', '分钟前');
    //   } else if (timeAgo.indexOf('hour ago') > -1) {
    //     return timeAgo.replace('hour ago', '小时前');
    //   } else if (timeAgo.indexOf('day ago') > -1) {
    //     return timeAgo.replace('day ago', '天前');
    //   } else if (timeAgo.indexOf('week ago') > -1) {
    //     return timeAgo.replace('week ago', '周前');
    //   } else if (timeAgo.indexOf('month ago') > -1) {
    //     return timeAgo.replace('month ago', '个月前');
    //   } else if (timeAgo.indexOf('year ago') > -1) {
    //     return timeAgo.replace('year ago', '年前');
    //   }
    // }
    onUnmounted(() => {
      clearInterval(state.timeInterval);
      state.timeInterval = null;
    });
    return {
      ...toRefs(state),
      useDateFormat,
    };
  },
};
</script>
<style lang="less" scoped>
.slider {
  -webkit-appearance: none;
  width: 100%;
  background: rgba(125, 125, 125, 0.1);
  border-radius: 1rem;
  height: 1rem;
  opacity: 0.8;
  margin: 0.5rem 0;
  outline: none !important;
  transition: opacity 0.2s;
}
.slider:hover {
  opacity: 1;
}
.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 1.3rem;
  height: 1.3rem;
  background: #000;
  cursor: pointer;
  border-radius: 50%;
}
</style>